<div th:fragment="html">
    <div id="investDiv">
        <div class="label label-warning">总投资一览</div>
        <table class="table table-striped table-bordered table-condensed">
            <thead>
            <th>基金代码</th>
            <th>基金名称</th>
            <th>投资总金额</th>
            <th>当前持有总金额</th>
            <th>总投资份额</th>
            <th>持有份额</th>
            <th>买入均价</th>
            <th>持有均价</th>
            <th>市值</th>
            <th>总亏盈</th>
            <th>收益率</th>
            </thead>
            <tbody>
            <tr v-for="bean in overview">
                <td>{{bean.fundcode}}</td>
                <td v-if=" bean.fundcode=='' ">汇总</td>
                <td v-else>
                    <span v-for="main in fundMains">
                        <span v-if="main.code==bean.fundcode">{{main.fundname}}</span>
                    </span>
                </td>
                <td>{{bean.sumMoney}}</td>
                <td>{{bean.holdSum | formatNumberFilter(2)}}</td>
                <td>{{bean.shareSum}}</td>
                <td>{{bean.holdShare}}</td>
                <td>{{bean.buyAVG | formatNumberFilter(4)}}</td>
                <td>{{bean.holdAVG | formatNumberFilter(4)}}</td>
                <td>{{bean.nowDwjz}}</td>
                <td>
                    <span v-if="0<bean.profit" class="label label-danger">{{bean.profit | formatNumberFilter(2)}}</span>
                    <span v-else class="label label-success">{{bean.profit | formatNumberFilter(2)}}</span>
                </td>
                <td>
                    <span v-if="0<bean.profit" class="label label-danger">{{bean.profit/bean.sumMoney*100 | formatNumberFilter(2)}}%</span>
                    <span v-else
                          class="label label-success">{{bean.profit/bean.sumMoney*100 | formatNumberFilter(2)}}%</span>
                </td>
            </tr>
            </tbody>
        </table>

        <table class="inputTable ">
            <tr>
                <td width="30%" align="right">
                    <span data-toggle="tooltip" data-placement="top">请选择指数:</span>
                </td>
                <td width="20%">
                    <select v-model="invest.fundcode" class="indexSelect form-control" @click="queryinvest(1)">
                        <option value="" selected>全部</option>
                        <option v-for="bean in fundMains " :value="bean.code">{{bean.fundname}} - ( {{bean.code}} )</option>
                    </select>
                </td>
                <td align="right" width="15%">买卖标志:</td>
                <td width="20%">
                    <select class="form-control" @change="queryinvest(1)" v-model="invest.buysellFlag">
                        <option value="" selected>全部</option>
                        <option value="0">买</option>
                        <option value="1">卖</option>
                    </select>
                </td>
                <td width="15%"></td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <button type="button" class="btn btn-success" @click="queryinvest(1)">查询</button>
                </td>
                <td>
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addInvestMod">新增
                    </button>
                </td>
            </tr>
        </table>

        <div class="modal fade" id="addInvestMod" tabindex="-1" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span><span
                                class="sr-only">Close</span></button>
                        <h4 class="modal-title">新增投资情况</h4>
                    </div>

                    <div>
                        <table class="inputTable">
                            <tr>
                                <td align="right" width="25%">基金代码:</td>
                                <td width="25%">
                                    <select v-model="addInvest.fundcode" class="indexSelect form-control">
                                        <option v-for="bean in fundMains " :value="bean.code">{{bean.fundname}} - ( {{bean.code}} )</option>
                                    </select>
                                </td>
                                <td align="right" width="25%">购买日期:</td>
                                <td width="25%"><input type="text" class="form-control" v-model="addInvest.operateDate">
                                </td>
                            </tr>
                            <tr>
                                <td align="right">买卖标志:</td>
                                <td>
                                    <select class="form-control" v-model="addInvest.buysellFlag">
                                        <option value="0">买</option>
                                        <option value="1">卖</option>
                                    </select>
                                </td>
                                <td align="right">总金额:</td>
                                <td><input type="text" class="form-control" v-model="addInvest.sumMoney"></td>
                            </tr>
                            <tr>
                                <td align="right">份额:</td>
                                <td><input type="text" class="form-control" v-model="addInvest.share"></td>
                            </tr>
                        </table>
                    </div>

                    <div class="modal-footer" style="text-align:center;">
                        <button class="btn btn-primary" @click="addInvestFunction" type="button">新增</button>
                        <button data-dismiss="modal" class="btn btn-default" type="button">关闭</button>
                    </div>
                </div>
            </div>
        </div>

        <table class="table table-bordered table-condensed">
            <thead>
            <th align="center" colspan="9">基金代码及名称</th>
            </thead>
            <tbody>
            <tr>
                <td width="5%">ID</td>
                <td width="15%">基金代码</td>
                <td width="11%">买/卖</td>
                <td width="15%">操作日期</td>
                <td width="11%">份额</td>
                <td width="11%">单位净值</td>
                <td width="11%">手续费</td>
                <td width="11%">总金额</td>
                <td width="10%">操作</td>
            </tr>
            <tr style="display:none;" id="notdata">
                <td colspan="9">暂无数据！</td>
            </tr>
            <tr v-for="bean in invests">
                <td>{{bean.id}}</td>
                <td>{{bean.fundcode}}</td>
                <td>
                    <span v-if="0==bean.buysellFlag" class="label label-danger">买</span>
                    <span v-if="1==bean.buysellFlag" class="label label-success">卖</span>
                </td>
                <td>{{bean.operateDate}}</td>
                <td>{{bean.share}}</td>
                <td>{{bean.dwjz}}</td>
                <td>{{bean.commission}}</td>
                <td>{{bean.sumMoney}}</td>
                <td>
                    <button type="button" class="btn btn-success" @click="editInvMod(bean.id)">修改</button>
                </td>
            </tr>
            </tbody>
        </table>

        <div class="modal fade" id="editInvMod" data-backdrop="static" tabindex="-1" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span><span
                                class="sr-only">Close</span></button>
                        <h4 class="modal-title">修改投资情况</h4>
                    </div>

                    <div>
                        <input type="text" class="form-control" v-model="editInvest.id" style="display:none;">
                        <table class="inputTable">
                            <tr>
                                <td align="right" width="25%">基金代码:</td>
                                <td width="25%">
                                    <select v-model="editInvest.fundcode" class="indexSelect form-control" disabled
                                            title="bean.fundname+'-'+bean.code">
                                        <option v-for="bean in fundMains " :value="bean.code">{{bean.fundname}} - ( {{bean.code}} )</option>
                                    </select>
                                </td>
                                <td align="right" width="25%">购买日期:</td>
                                <td width="25%"><input type="text" class="form-control" v-model="editInvest.operateDate"
                                                       disabled>
                                </td>
                            </tr>
                            <tr>
                                <td align="right">买卖标志:</td>
                                <td>
                                    <select class="form-control" v-model="editInvest.buysellFlag" disabled>
                                        <option value="0">买</option>
                                        <option value="1">卖</option>
                                    </select>
                                </td>
                                <td align="right">总金额:</td>
                                <td><input type="text" class="form-control" v-model="editInvest.sumMoney"></td>
                            </tr>
                            <tr>
                                <td align="right">份额:</td>
                                <td><input type="text" class="form-control" v-model="editInvest.share"></td>
                            </tr>
                        </table>
                    </div>

                    <div class="modal-footer" style="text-align:center;">
                        <button class="btn btn-primary" @click="editInvestFunction" type="button">修改</button>
                        <button data-dismiss="modal" class="btn btn-default" type="button">关闭</button>
                    </div>
                </div>
            </div>
        </div>

        <!--            分页-->
        <div style="text-align:center;">
            <div th:replace="./include/page::html"></div>
        </div>
    </div>


    <script>
        $(function () {
            var investVue = {
                overview:[],
                invest:{fundcode:'',buysellFlag:''},
                fundMains:[],

                invests: [],
                pagination: {},

                addInvest:{},
                editInvest:{},
            };
            var vue = new Vue({
                el: '#investDiv',
                data: investVue,
                mounted: function () {
                    this.$nextTick(function () {
                        this.mainList();
                        this.overviewFunction();
                        this.queryinvest(1);
                    });
                },
                methods: {
                    init:function(){

                    },
                    mainList:function(){
                        // 记得改
                        var url = "/fundmains/list";
                        axios.get(url).then(function (response) {
                            vue.fundMains = response.data.list;
                        });
                    },
                    queryinvest: function (start) {
                        if (undefined == vue.pagination.size)
                            vue.pagination.size = 10;
                        if(undefined == vue.invest.fundcode){
                            return;
                        }

                        var url = "/userinvests/list/"+vue.pagination.size+"/"+start;
                        axios.post(url,vue.invest).then(function(response) {
                            vue.pagination = response.data.pagination;
                            vue.invests = vue.pagination.records;
                        });
                    },
                    overviewFunction:function(){
                        var url = "/userinvests/overview";
                        axios.get(url).then(function(response){
                            var relust=response.data;
                            if(relust.code==0){
                                vue.overview=relust.overview;
                            }
                        });
                    },
                    addInvestFunction:function () {
                        if(vue.addInvest.sumMoney=='')
                            vue.addInvest.sumMoney=0;
                        if(vue.addInvest.share=='')
                            vue.addInvest.share=0;

                        if(vue.addInvest.operateDate==''){
                            alert("购买日期不允许为空！");
                        }else if(vue.addInvest.share==0 && vue.addInvest.sumMoney==0){
                            alert("份额和总金额不允许同时为空！");
                        }else{
                            var url = "/userinvests/add";
                            axios.post(url,vue.addInvest).then(function(response){
                                var result = response.data;
                                if(result.code==0){
                                    alert(result.msg);
                                    $("#addInvestMod").modal('hide');
                                    vue.invest.fundcode=vue.addInvest.fundcode;
                                    vue.queryinvest(vue.pagination.current);
                                    vue.addInvest={};
                                }else{
                                    alert(result.msg);
                                }

                            });
                        }
                    },
                    editInvMod:function(id){
                        var url = "/userinvests/getById/"+id;
                        axios.get(url).then(function(response) {
                            if(null==response.data){
                                alert("数据获取失败，请重新查询后再进行修改处理！");
                            }else{
                                vue.editInvest = response.data;
                                $("#editInvMod").modal('show');
                            }
                        });
                    },
                    editInvestFunction:function(){
                        var url = "/userinvests/edit";
                        axios.post(url,vue.editInvest).then(function(response){
                            var result = response.data;
                            if(result.code==0){
                                alert(result.msg);
                                $("#editInvMod").modal('hide');
                                vue.invest.fundcode=vue.addInvest.fundcode;
                                vue.queryinvest(vue.pagination.current);
                                vue.editInvest={};
                            }else{
                                alert(result.msg);
                            }
                        });
                    },

                    ChangePageSize: function () {
                        vue.queryinvest(vue.pagination.current);
                    },
                    jump: function(page){
                        if('first'== page && !vue.pagination.isfirst)
                            vue.queryinvest(1);
                        else if('pre'== page && !vue.pagination.isfirst)
                            vue.queryinvest(vue.pagination.current-1);
                        else if('next'== page && !vue.pagination.islast)
                            vue.queryinvest(vue.pagination.current+1);
                        else if('last'== page && !vue.pagination.islast)
                            vue.queryinvest(vue.pagination.pages);
                    },
                    jumpByNumber: function(start){
                        if(vue.pagination.current != start){
                            vue.queryinvest(start);
                        }
                    },
                }
            });
        });
    </script>

</div>
